<script setup lang="ts">
import useChat from '@/composables/custcare/talk/useChat';
import TrailCustcare from './TrailCustcare.vue';

const props = defineProps(['visitorInfo'])

const emit = defineEmits(['on-trail'])

const { talkLayoutHeight, mainLayoutHeight, msg, isShowEmo, imgFileInput, emos, messageList, handleSend, showEmo, handleEmo, emotion, handleImgFileChange, clickUploadImg, isShowImg, showImgSrc, handleShowImg, custCareUserInfo, trailCustcareRef, trailCustcare, onTrailChange } = useChat(props.visitorInfo, emit)
</script>
<template>
    <div class="talk-layout" :style="{ height: talkLayoutHeight + 'px' }">
        <div class="header">
            <div class="title">
                {{ custCareUserInfo.service_client_ip }} {{ custCareUserInfo.service_province }}
                {{ custCareUserInfo.service_city }} {{ custCareUserInfo.service_online == 1 ? '在线' : '离线' }}
            </div>
            <div class="trail" v-if="custCareUserInfo.service_online == 1">
                <el-button size="small" type="primary"
                    @click="trailCustcare(visitorInfo.client_ip, visitorInfo.channel_id, visitorInfo.uuid)">转接
                </el-button>
            </div>
        </div>
        <div class="main-body" id="messageList" :style="{ height: mainLayoutHeight + 'px' }">
            <div :class="['direct-chat-msg', msg.msg_type]" v-for="msg in messageList.list">
                <div class="avatar" v-if="msg.msg_type == 'right'">
                    <img class="direct-chat-img" :src="msg.avatar" />
                </div>
                <div class="msg">
                    <div class="direct-chat-info">
                        <span class="direct-chat-name" v-if="msg.msg_type == 'left'">
                            {{ custCareUserInfo.service_client_ip }} {{ custCareUserInfo.service_city }}
                        </span>
                        <span class="direct-chat-timestamp">{{ msg.send_time_text }}</span>
                    </div>
                    <div class="direct-chat-text" v-if="msg.type == 1"
                        v-html="msg.content.replace(/\:[a-z0-9-]+\:/gi, emotion)"></div>
                    <div class="direct-chat-text" @click="handleShowImg(msg.content)" v-else-if="msg.type == 2">
                        <img :src="msg.content" class="img" />
                    </div>
                    <div class="direct-chat-text" v-html="msg.content" v-else></div>
                </div>
            </div>
        </div>
        <div class="preview-img" v-if="isShowImg">
            <div class="img-container">
                <!-- 显示的大图 -->
                <img class="img" :src="showImgSrc">
                <!-- 关闭按钮 -->
                <a class="close" href="javascript:void(0);" @click="isShowImg = false"></a>
            </div>
        </div>
        <div class="emos" v-if="isShowEmo">
            <img :src="'/src/assets/emo/streamlinehq-' + emo + '-smiley-people-102.png'" v-for="emo in emos"
                @click="handleEmo(emo)" />
        </div>
        <div class="main-bottom">
            <div class="file-img">
                <svg-icon icon-class="User-emotion" @click="showEmo"></svg-icon>
                <input ref="imgFileInput" id="img-file" class="file" type="file" accept="image/png,image/jpeg,image/gif"
                    @change.prevent="handleImgFileChange" />
                <svg-icon icon-class="Media-image" @click="clickUploadImg"></svg-icon>
                <!-- <svg-icon icon-class="folder-2"></svg-icon> -->
            </div>
            <div class="content">
                <textarea rows="3" class="text" v-model="msg"></textarea>
            </div>
            <div class="btn">
                <button type="button" @click="handleSend">发送</button>
            </div>
        </div>
    </div>
    <!-- 转接客服 -->
    <TrailCustcare ref="trailCustcareRef" @on-trail="onTrailChange"></TrailCustcare>
</template>
<style lang="scss" scoped>

</style>